import React, { Component } from 'react';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';
import MenuRight from '@/components/menu/child/MenuRight';
import { Link } from 'react-router-dom';
import './menu.scss';
import $ from 'jquery';

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      pop: [],
      new: [],
      top: [],
      mon: []
    }
  }
  componentDidMount () {
    let f_type = '本周最受欢迎';
    let type = JSON.stringify(f_type)
    $('.menu-page-title').empty().append(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goPop () {
    let f_type = '本周最受欢迎';
    let type = JSON.stringify(f_type)
    $('.menu-page-title').empty().append(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goNew () {
    let f_type = '新秀菜谱';
    $('.menu-page-title').empty().append(f_type)
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goTop () {
    let f_type = '往期头条';
    $('.menu-page-title').empty().append(f_type)
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goMon () {
    let f_type = '月度最佳';
    $('.menu-page-title').empty().append(f_type)
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goDetail (fid) {
    this.props.history.push('/detail/' + fid)
  }
  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }

  render () {
    let pop = this.state.pop;
    let arr = [];
    for(let i in pop) {
      let fid = pop[i].f_id
      let uname = pop[i].u_name
      arr.push(
          <li >
            <div className="menu-cover" onClick={ this.goDetail.bind(this, fid)}>
              <div className="menu-banner">
                <img src= {pop[i].banner} alt="" />
              </div>
            </div>
            <div className="menu-desc">
              <p className="menu-name" onClick={ this.goDetail.bind(this, fid)}>
                <b href="/" target="_blank">{pop[i].name}</b>
              </p>
              <div className="menu-stats">
                <p className="menu-content">
                { pop[i].ingredients }
                </p>
                <span className="menu-time">七天内 <b>{pop[i].number}</b> 人做过</span>
                <span className="menu-user" onClick={ this.goUsers.bind(this,uname)}>{pop[i].u_name} <i className="iconfont icon-chushimao2"></i></span>
              </div>
            </div>
          </li>
      )
    }
    return (
      <div className = "container">
        <div className="header">
          <GlobalNav {...this.props}/>
         </div>
        <div className="section">
          <div className="menu-left">
            <div className="menu-left-connent">
              <div className="menu-left-1">
                <ul>
                  <li><span></span><Link to="/kind">全部分类</Link></li>
                  <li onClick={ this.goPop.bind(this) }>本周最受欢迎</li>
                  <li onClick={ this.goNew.bind(this) }>新秀菜谱</li>
                  <li onClick={ this.goTop.bind(this) }>往期头条</li>
                  <li onClick={ this.goMon.bind(this) }>月度最佳</li>
                  <li>最新创建</li>
                  <li>厨房101</li>
                  <li>流行菜单</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="menu-center">
            <h1 className="menu-page-title"> </h1>
            <div className="menu-page">
              <ul>
                { arr }
              </ul>
            </div>
          </div>
          <MenuRight {...this.props}/>
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
